<template>
  <div class="video">
    <el-button
      type="btn"
      @click="
        dialogVisible = true;
        isEdit = false;
      ">添加视频</el-button>
    <div class="form">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="videoForm" label-width="80px">
          <el-form-item label="上传封面">
            <el-upload
              :action="getUploadURL()"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="heandSuccess"
              :file-list="fileList">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogImgVisible" >
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="视频标题">
            <el-input v-model="videoForm.title"> </el-input>
          </el-form-item>
          <el-form-item label="视频地址">
            <el-input v-model="videoForm.iframe_url"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogVisible = false;
              onSubmit();">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="videoTable">
      <el-table :data="videoList" border style="width: 100%">
        <el-table-column label="序号" width="150" type="index">
        </el-table-column>
        <el-table-column prop="image" label="封面" width="200">
          <template slot-scope="scope">
            <img class="pic" :src="scope.row.image" alt />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="视频标题" width="150">
        </el-table-column>
        <el-table-column
          prop="iframe_url"
          label="视频地址"
          width="250"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="详情" width="240">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                dialogPreviewVisible = true;
                getVideoUrl(scope.row.iframe_url);">预览视频</el-button>
          </template>
          <el-dialog
            title="预览视频"
            :visible.sync="dialogPreviewVisible"
            :append-to-body="true"
            width="30%">
            <div id="video" v-html="video_url"></div>
          </el-dialog>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              @click="
                updateVideo(
                  scope.row.id,
                  scope.row.title,
                  scope.row.iframe_url,
                  scope.row.image
                )
              "
              type="text"
              size="small">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteVideo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogImgVisible: false,
      dialogVideoVisible: true,
      dialogPreviewVisible: false,
      id: 0,
      isEdit: false,
      dialogImageUrl: "",
      imageUrl: "",
      disabled: false,
      videoList: [],
      fileList: [],
      videoForm: {
        title: "",
        image: "",
        iframe_url: "",
      },
      video_url: "",
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.video_url = "";
        })
        .catch(() => {});
    },
    handleClick(row) {
      console.log(row);
    },
    getVideoUrl(video_url) {
      this.video_url = video_url;
    },
    //移除文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //预览文件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImgVisible = true;
    },
    //获取图片
    heandSuccess(response) {
      if (response.code === 20000) {
        this.videoForm.image = response.data.file;
      }
    },
    //获取视频
    getVideoList() {
      request.get("/video?page=1&total=100").then((res) => {
        if (res.data.code === 20000) {
          this.videoList = res.data.data;
        } else {
          this.$message.error("获取视频列表出错！");
        }
      });
    },
    //添加视频
    onSubmit() {
      if (!this.isEdit) {
        request
          .post("/video", {
            title: this.videoForm.title,
            image: this.videoForm.image,
            iframe_url: this.videoForm.iframe_url,
          })
          .then((res) => {
            if (res.data.code === 20000) {
              this.getVideoList();
            } else {
              this.$message.error("添加失败！");
            }
          });
      } else {
        request
          .put(`/video/${this.id}`, {
            title: this.videoForm.title,
            image: this.videoForm.image,
            iframe_url: this.videoForm.iframe_url,
          })
          .then((res) => {
            if (res.data.code === 20000) {
              this.getVideoList();
            } else {
              this.$message.error("视频更新错误");
            }
          });
      }
    },
    //删除视频
    deleteVideo(id) {
      request.delete(`/video/${id}`).then((res) => {
        if (res.data.code === 20000) {
          this.getVideoList();
        } else {
          this.$message.error("删除出错");
        }
      });
    },
    //更新视频
    updateVideo(id, title, iframe_url, image) {
      this.id = id;
      this.videoForm.title = title;
      this.videoForm.iframe_url = iframe_url;
      this.videoForm.image = image;
      this.fileList = [{ url: image }];
      this.isEdit = true;
      this.dialogVisible = true;
    },
    getUploadURL() {
      return `${process.env.VUE_APP_BASE_API}upload`;
    },
  },
  mounted() {
    this.getVideoList();
  },
  watch: {
    isEdit() {
      if (!this.isEdit) {
        this.id = 0;
        this.videoForm.title = "";
        this.videoForm.iframe_url = "";
        this.videoForm.image = "";
        this.dialogVisible = true;
        this.isEdit = true;
        this.fileList = [];
      }
    },
  },
};
</script>
<style scoped>
.pic {
  width: 50px;
  height: 50px;
}
#video {
  text-align: center;
}
#video iframe {
  width: 100%;
  height: 500px;
}
</style>

